<template>
  <div class="dataDetailsComponent" v-if="oItem">
    <div class="content" :style="{backgroundColor: oItem.main.bgColor}">
      <ul>
        <li class="head">
          <span class="s1">码名称</span>
          <span class="s2">识别号</span>
          <span class="s3">系统ID</span>
          <span class="s4">时间</span>
          <span class="s5">创建</span>
        </li>
        <li v-for="l in list" :key="l.id" :style="{color: oItem.main.fontColor}">
          <span class="s1">{{ l.name }} <i class="iconfont icon-xuanfuanniu-bianji" :style="{color: oItem.main.iconColor}"></i> </span>
          <span class="s2">{{ l.cid }}</span>
          <span class="s3">{{ l.sid }}</span>
          <span class="s4">{{ l.time }}</span>
          <span class="s5">{{ l.crt }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import Bus from "@/utils/bus";
import { mapState } from "vuex";
export default {
  name: "dataDetailsComponent",
  data() {
    return {
      oItem: null,
      list: [
        { id: 1, name: "徐婷婷", cid: "26", sid: "47", time: "12-15", crt: "男" },
        { id: 2, name: "王笑笑", cid: "27", sid: "48", time: "12-15", crt: "男" },
        { id: 3, name: "张三三", cid: "28", sid: "49", time: "12-15", crt: "男" },
        { id: 4, name: "李思思", cid: "29", sid: "50", time: "12-15", crt: "男" },
        { id: 5, name: "王在在", cid: "30", sid: "51", time: "12-15", crt: "男" },
        { id: 6, name: "郝健健", cid: "31", sid: "52", time: "12-15", crt: "男" },
        { id: 7, name: "郑莘莘", cid: "32", sid: "53", time: "12-15", crt: "男" },
        { id: 8, name: "喜滋滋", cid: "33", sid: "54", time: "12-15", crt: "男" },
        { id: 9, name: "安吉江", cid: "34", sid: "55", time: "12-15", crt: "男" },
        { id: 10, name: "郑莘莘", cid: "32", sid: "53", time: "12-15", crt: "男" },
        { id: 11, name: "喜滋滋", cid: "33", sid: "54", time: "12-15", crt: "男" },
        { id: 12, name: "郑莘莘", cid: "32", sid: "53", time: "12-15", crt: "男" },
        { id: 13, name: "喜滋滋", cid: "33", sid: "54", time: "12-15", crt: "男" },
        { id: 14, name: "郑莘莘", cid: "32", sid: "53", time: "12-15", crt: "男" },
        { id: 15, name: "喜滋滋", cid: "33", sid: "54", time: "12-15", crt: "男" },
      ],
    };
  },
  created() {},
  props: ["item", "ename", "id"],
  components: {},
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
    const emitName = this.ename + this.id;
    Bus.$off(emitName);
    Bus.$on(emitName, (control) => {
      this.oItem = null;
      this.$nextTick(() => {
        this.oItem = JSON.parse(control);
      });
    });
  },
  methods: {
    //页面初始化
    init() {
      // //console.log("进入init");
      this.oItem = null;
      this.oItem = JSON.parse(JSON.stringify(this.item));
    },
  },
  computed: mapState(["decorate"]),
  watch: {},
};
</script>
<style scoped lang="scss">
.dataDetailsComponent {
  display: flex;
  width: 100%;
  .content {
    display: flex;
    width: 100%;
    ul {
      display: flex;
      flex-direction: column;
      width: 100%;
      li {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 15px 0;
        .head {
          display: flex;
          align-items: center;
          width: 100%;
          span {
            font-size: 16px;
            display: flex;
            justify-content: center;
          }
          .s1 {
            width: 30%;
          }
          .s2 {
            width: 15%;
          }
          .s3 {
            width: 15%;
          }
          .s4 {
            width: 20%;
          }
          .s5 {
            width: 20%;
          }
        }
        & > span {
          font-size: 12px;
          display: flex;
          justify-content: center;
          &.s1 {
            width: 30%;
            i{margin-left:6px;font-size: 14px;}
          }
          &.s2 {
            width: 15%;
          }
          &.s3 {
            width: 15%;
          }
          &.s4 {
            width: 20%;
          }
          &.s5 {
            width: 20%;
          }
        }
      }
    }
  }
}
</style>
